<template>
<div class="aaaaa">
<div :class="{his:!panduan}">
    <div class="spliulans">
        <div class="xiaopage-wrap">
            <span class="upd-wrap">
                <span class="xiaofenye ml3"><span class="xiaodq">1</span>/<span class="xiaopagezong">2</span></span>
                <b class="shang ml3 fypage"><</b>
                <a href="" class="xia ml3 fypage">></a>
            </span>
        </div>
        <ul class="dplist-wrap clearfix">
            <li v-for="(item,key) in arr" :key="key" class="dplist-li">
                <a href="javascript:;" class="dphead">
                    <img :src="'/img/'+imgwrap[key][0]" @click="tiaospin(key)" class="xianshidatu" alt="">
                </a>
                <div class="dpdaohang clearfix">
                    <a href="" title="上一页" class="upye fl"><</a>
                    <div class="xiaotu-wrap">
                        <div class="xxt clearfix">
                            <span class="xiaotu fl" @click="xuantu(key,keys,imgwrap[key][keys])" v-for="(newi,keys) in imgwrap[key]" :key="keys">
                                <img :src="'/img'+imgwrap[key][keys]" alt="" class="xiaotuimg">
                            </span>
                        </div>
                    </div>
                    <a href="" title="下一页" class="downye fr">></a>
                </div>
                <div class="dpininfo">
                    <div class="jiageinfos">
                        <span class="qian">￥</span>
                        <span class="pricewrap">{{jgwrap[key][0]}}</span>
                    </div>
                    <div class="linshi"></div>
                    <div class="biaoqian-wrap">
                        <a href="" class="biaoqian"><span class="miaoshu" v-for="(a,akey) in mswrap[key]" :key="akey">{{a}}&nbsp;</span> </a>
                    </div>
                    <div class="xlxq-wrap">
                        <span><span class="zxl-wrap wrap-l">总销量：</span><span class="zxl wrap-r">{{item.sell}}</span></span>
                        <span><span class="pj-wrap wrap-l">评价：</span><a href="" class="pinjia wrap-r">{{item.comments}}</a></span>
                    </div>
                </div>
            </li>
            
        </ul>
        <div class="dpage-wrap clearfix">
            <div class="daodi fr">
                <form action="">
                    到第 
                    <input type="text" :value="num" size="3" name="pageno" class="pageno">
                    页
                    <button type="button" class="pagebtn">确定</button>
                </form>
            </div>
            <div class="dpage fr">
                <a href="" class="sx ">上一页</a>
                <a href="" class="yeshu">1</a>
                <a href="" class="yeshu pacur">2</a>
                <a href="" class="sx pacur">下一页</a>
            </div>
            <!-- <input type="text" :value="nmsg"> -->
        </div>
    </div>
    </div>
    <div :class="{his:panduan}">未查询到数据</div>
    </div>
</template>

<script>
export default {
   props:['nmsg',"gjz","jgw","zy"],
    data(){
        return{
            num:2,
            id:'',
            arr:"",
            imgwrap:[],
            img:"",
            miaoshu:"",
            mswrap:[],
            jiage:"",
            jgwrap:[],
            b:"",
            panduan:true,
            // gjz:"",
            lowjg:"",
            upjg:"",
            cjarr:""
        }
    },
    watch:{
        zy(newV,oldV){
            console.log(newV)
             this.img=""
            this.miaoshu=""
            this.jiage=""
            this.imgwrap=[]
            this.mswrap=[]
            this.jgwrap=[]
            this.arr=[]
              axios.post("/api/spsdh",{id:this.id}).then((data)=>{
            if(data.data){
                this.panduan=true,
                this.arr=data.data
               for(var i=0;i<this.arr.length;i++){
                   _this.img=_this.arr[i].img.split(',')
                   _this.miaoshu=_this.arr[i].miaoshutag.split(',')
                   _this.jiage=_this.arr[i].money.split(',')
                   _this.imgwrap.push(_this.img)
                   _this.mswrap.push(_this.miaoshu)
                   _this.jgwrap.push(_this.jiage)
                   _this.img=""
                   _this.miaoshu=""
                   _this.jiage=""
                  
               }
            }else{
                this.panduan=false
            }
        })
        },
        nmsg(newV,oldV){
               var _this=this
                 this.img=""
            this.miaoshu=""
            this.jiage=""
            this.imgwrap=[]
            this.mswrap=[]
            this.jgwrap=[]
            this.arr=[]
            axios.post("/api/dhcha",{dnav:newV,id:this.id}).then((data)=>{
                if(data.data){
                    this.panduan=true,
                    console.log(data.data)
                     this.arr=data.data
               for(var i=0;i<this.arr.length;i++){
                   _this.img=_this.arr[i].img.split(',')
                   _this.miaoshu=_this.arr[i].miaoshutag.split(',')
                   _this.jiage=_this.arr[i].money.split(',')
                   _this.imgwrap.push(_this.img)
                   _this.mswrap.push(_this.miaoshu)
                   _this.jgwrap.push(_this.jiage)
                   _this.img=""
                   _this.miaoshu=""
                   _this.jiage=""
                  
               }
                }else{
                    this.panduan=false
                }
            })
        },
        gjz:{
            handler(newV){
                  var _this=this
               
            if(!newV.gjzw || !newV.lowjg || !newV.upjg){
                console.log("zhixing")
                 this.img=""
            this.miaoshu=""
            this.jiage=""
            this.imgwrap=[]
            this.mswrap=[]
            this.jgwrap=[]
            this.arr=this.cjarr
            for(var i=0;i<this.arr.length;i++){
                   _this.img=_this.arr[i].img.split(',')
                   _this.miaoshu=_this.arr[i].miaoshutag.split(',')
                   _this.jiage=_this.arr[i].money.split(',')
                   _this.imgwrap.push(_this.img)
                   _this.mswrap.push(_this.miaoshu)
                   _this.jgwrap.push(_this.jiage)
                   _this.img=""
                   _this.miaoshu=""
                   _this.jiage=""
                  
               }
                return false
        //         axios.post("/api/spsdh",{id:this.id}).then((data)=>{
        //     if(data.data){
        //         this.panduan=true,
        //         this.arr=data.data
        //        for(var i=0;i<this.arr.length;i++){
        //            _this.img=_this.arr[i].img.split(',')
        //            _this.miaoshu=_this.arr[i].miaoshutag.split(',')
        //            _this.jiage=_this.arr[i].money.split(',')
        //            _this.imgwrap.push(_this.img)
        //            _this.mswrap.push(_this.miaoshu)
        //            _this.jgwrap.push(_this.jiage)
        //            _this.img=""
        //            _this.miaoshu=""
        //            _this.jiage=""
                  
        //        }
        //     }else{
        //         this.panduan=false
        //     }
        // })
            }
              this.img=""
            this.miaoshu=""
            this.jiage=""
            this.imgwrap=[]
            this.mswrap=[]
            this.jgwrap=[]
            this.arr=[]
                axios.post("/api/gjcha",{gjdata:newV,id:this.id}).then((data)=>{
                    if(data.data){
                         this.panduan=true,
                        console.log(data.data)
                          this.arr=data.data
               for(var i=0;i<this.arr.length;i++){
                   _this.img=_this.arr[i].img.split(',')
                   _this.miaoshu=_this.arr[i].miaoshutag.split(',')
                   _this.jiage=_this.arr[i].money.split(',')
                   _this.imgwrap.push(_this.img)
                   _this.mswrap.push(_this.miaoshu)
                   _this.jgwrap.push(_this.jiage)
                   _this.img=""
                   _this.miaoshu=""
                   _this.jiage=""
                  
               }
               console.log(this.imgwrap,this.mswrap)
                    }else{
                        this.panduan=false
                    }
                })
            },
           deep:true
        },
        jgw:{
            handler(newV){
                var _this=this
                 this.img=""
            this.miaoshu=""
            this.jiage=""
            this.imgwrap=[]
            this.mswrap=[]
            this.jgwrap=[]
            this.arr=[]
                axios.post("/api/jichucha",{jgw:newV,id:this.id}).then((data)=>{
                    console.log(data.data)
                    if(data.data){
                         this.panduan=true,
                         _this.arr=data.data
               for(var i=0;i<_this.arr.length;i++){
                   _this.img=_this.arr[i].img.split(',')
                   _this.miaoshu=_this.arr[i].miaoshutag.split(',')
                   _this.jiage=_this.arr[i].money.split(',')
                   _this.imgwrap.push(_this.img)
                   _this.mswrap.push(_this.miaoshu)
                   _this.jgwrap.push(_this.jiage)
                   _this.img=""
                   _this.miaoshu=""
                   _this.jiage=""
                  
               }
                    }else{
                        this.panduan=false
                    }
                })
            },
            deep:true
        }
    },
    created(){
        var _this=this
        if(this.$route.query.spin){
            this.$router.push({name:"shangpin",params:{sid:this.$route.query.spin}})
        }
        this.id=this.$route.params.id
        let dps=sessionStorage.getItem("danpinnav")
        if(dps){
            console.log("执行了这里")
            axios.post("/api/dhcha",{dnav:dps,id:this.id}).then((data)=>{
                if(data.data){
                     this.arr=data.data
               for(var i=0;i<this.arr.length;i++){
                   _this.img=_this.arr[i].img.split(',')
                   _this.miaoshu=_this.arr[i].miaoshutag.split(',')
                   _this.jiage=_this.arr[i].money.split(',')
                   _this.imgwrap.push(_this.img)
                   _this.mswrap.push(_this.miaoshu)
                   _this.jgwrap.push(_this.jiage)
                   _this.img=""
                   _this.miaoshu=""
                   _this.jiage=""
                  
               }
                }else{
                    this.panduan=false
                }
            })
            sessionStorage.setItem('danpinnav',"")
        }else{
            axios.post("/api/spsdh",{id:this.id}).then((data)=>{
            if(data.data){
                this.arr=data.data
                this.cjarr=data.data
               for(var i=0;i<this.arr.length;i++){
                   _this.img=_this.arr[i].img.split(',')
                   _this.miaoshu=_this.arr[i].miaoshutag.split(',')
                   _this.jiage=_this.arr[i].money.split(',')
                   _this.imgwrap.push(_this.img)
                   _this.mswrap.push(_this.miaoshu)
                   _this.jgwrap.push(_this.jiage)
                   _this.img=""
                   _this.miaoshu=""
                   _this.jiage=""
                  
               }
            }else{
                this.panduan=false
            }
        })
        }
            
    },
    methods:{
        xincha(val){
            console.log(1)
        },
        tiaospin(val){
            let sid=this.arr[val].SID
            this.$router.push({name:"shangpin",params:{sid:sid}})
        },
        xuantu(dval,val,newsrc){
            let dawrap=document.getElementsByClassName("dplist-li")[dval]
            console.log(dawrap)
            let syduixiang=dawrap.querySelectorAll(".xxt .xiaotu")
            console.log(syduixiang.length)
            let bxduixiang=syduixiang[val]
            console.log(bxduixiang)
            let xianshidatu=document.getElementsByClassName("xianshidatu")[dval]
            // console.log(dawrap.querySelectorAll(".xxt .xiaotu"))
            if(bxduixiang.className.indexOf("active")>-1){
                console.log("you")
            }else{
                for(var i=0;i<syduixiang.length;i++){
                    syduixiang[i].classList.remove("active")
                }
                bxduixiang.classList.add("active")
                xianshidatu.src=`/img${newsrc}`
            }
        }
    }
}
</script>


<style scoped>
.his{
    display: none
}
   *{
       box-sizing: content-box;
   }
   a{
       font-size: 12px;
   }
    .ml3{
        margin-left: 3px;
    }
    .spliulans{
        position: relative;
    }
    .xiaopage-wrap{
        position: absolute;
        top: -40px;
        right: 0;
        font-family: \5B8B\4F53,Helvetica,sans-serif;
        font-size: 12px;
        color: #999;
    }
    .upd-wrap a{
        color: #806f66;
        cursor: pointer;
    }
    .upd-wrap b{
        background-color: #efefef;
    }
    .upd-wrap a:hover{
        color: #b10000;
        background: #efefef;
    }
    .fypage{
        display: inline;
        width: 19px;
        padding: 4px 6px;
        line-height: 1;
        font-weight: 700;
        font-size: 12px;
        text-align: center;
        background-color: #fff;
        border: 1px solid #e5e5e5;
    }
    .dplist-wrap{
        padding-left: 0;
        box-sizing: content-box;
    }
    .dphead{
        width: 180px;
        height: 180px;
    }
    .dphead img{
        width: 180px;
        height: 180px;
    }
    .dplist-wrap li{
        min-height: 413px;
        box-sizing: content-box;
        float: left;
        max-width: 180px;
        padding: 5px 5px 30px;
        margin-left: 0;
        margin-right: 9px;
        overflow: hidden;
        background: #fff;
        position: relative;
        margin-bottom: 11px;
    }
    .dplist-wrap li:nth-child(4n){
        margin-right: 0;
    }
    .dpdaohang a{
        visibility: visible;
        display: inline-block;
        margin-left: 2px;
        margin-right: 2px;
        cursor: pointer;
        margin-top: 18px;
        /* float: left; */
        color: #fff;
        background-color: #b8b2b1;
        font: 700 11px/15px \5b8b\4f53,Hei;
        height: 14px;
        width: 14px;
        border-radius: 50%;
        text-align: center;
    }
    .dpdaohang a:hover{
        background: #b10000;
    }
    .xiaotu-wrap{
        width: 144px;
        display: inline;
        float: left;
        height: 38px;
        margin: 5px 0 0;
        overflow: hidden;
        position: relative;
    }
    .xxt{
        position: absolute;
        width: 999999px;
        left: 0px;
    }
    .xiaotu{
        display: block;
        margin-left: 1px;
        margin-right: 1px;
        height: 30px;
        width: 30px;
        margin-top: 4px;
        padding: 1px;
        text-align: center;
        vertical-align: middle;
        border: 1px solid #CCC;
        cursor: pointer;
        font-size: 0;
        box-sizing: content-box;
        position: relative;
    }
    .xiaotu.active{
        border-color : #cd0000;
    }
    .xiaotu.active::before{
        content: "";
        position: absolute;
        display: block;
        top:-5px;
        left:50%;
        margin-left: -3px;
        width: 0;
        height: 0;
        border-left: 4px solid transparent;
        border-right: 4px solid transparent;
        border-bottom: 4px solid #cd0000;
    }
    .xiaotuimg{
        max-height: 30px;
        max-width: 30px;
        vertical-align: middle;
    }
    .dpininfo{
        margin-top: 5px;
    }
    .jiageinfos{
        color: #c00;
        font-family: arial,verdana,sans-serif;
        font-size: 14px;
        font-weight: 700;
        height: 20px;
        line-height: 20px;
        margin: 0;
    }
    .lingshi{
        width: 100%;
        height: 25px;
    }
    .biaoqian-wrap{
        margin-top: 20px;
    }
    .biaoqian-wrap a{
        color: #333;
    }
    .biaoqian-wrap a:hover{
        text-decoration: underline;
    }
    .xlxq-wrap{
        margin-top: 3px;
        font-size: 0;
    }
    .xlxq-wrap>span{
        display:block;
        height: 20px;
        line-height: 20px;
        font-size: 14px;
        /* margin-bottom: 5px; */
    }
    .zxl{
        color: #c49173;
        font-family: tahoma,arial,'\5b8b\4f53';
        font-weight: bolder;
    }
    .wrap-l{
        display: inline-block;
    }
    .wrap-r{
        display: inline-block;
        width: 65%;
        /* overflow: hidden; */
        /* text-overflow: ellipsis;
        white-space: nowrap;
        line-height: 10px; */
        /* height: 20px!important; */
    }
    .pinjia{
        color: #38b;
    }
    .pinjia:hover{
        text-decoration: underline;
    }
    .dpage a{
        display: inline-block;
        height: 26px;
        line-height: 26px;
        border: 1px solid #e5e5e5;
        padding: 0 10px;
        color: #2953A6;
    }
    .dpage a:hover{
        text-decoration: underline;
    }
    .dpage a.pacur{
        background: #efefef;
        color: #999;
        text-decoration: none;
        cursor: default;
    }
    .dpage a.pacur:hover{
        text-decoration: none;
    }
    .daodi{
        margin-bottom: 10px;
        margin-left: 10px;
        margin-right: 10px;
        height: 28px;
        line-height: 28px;
        color: #999;
        font-size: 14px;
        font-weight: 700;
        font-family: \5B8B\4F53,Helvetica,sans-serif;
        cursor: pointer;
    }
    .pageno{
        font-size: 12px;
        height: 18px;
        border: 1px solid #ccc;
        color: #999;
        text-align: center;
        /* box-sizing: content-box; */
    }
    .pagebtn{
        color: #222;
        background: #fff;
        padding: 0 6px;
        height: 20px;
        letter-spacing: .2em;
        font-size: 12px;
        border: 1px solid #ccc;
        background: #DDDDDD;
        cursor: pointer;
    }
    .pagebtn:hover{
        background: #fff;
    }
</style>

